﻿@page
@{ Layout = "_Layout"; }
@section Styles{
  <style>
    .avatar-uploader .el-upload {
      width: 180px;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  </style>
}

<div style="height: 10px"></div>

<el-form v-on:submit.native.prevent size="small" ref="form" :model="form" label-width="280px">

  <el-form-item label="是否启用水印功能">
    <el-radio-group v-model="form.isWaterMark">
      <el-radio :label="true">启用</el-radio>
      <el-radio :label="false">禁用</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item v-if="form.isWaterMark" label="添加水印位置">
    <table width="300" height="243" border="0" background="/sitefiles/assets/images/waterMark.jpg">
      <tbody>
        <tr>
          <td width="33%" align="center">
            <el-radio v-model="form.waterMarkPosition" :label="1">1</el-radio>
          </td>
          <td width="33%" align="center">
            <el-radio v-model="form.waterMarkPosition" :label="2">2</el-radio>
          </td>
          <td width="33%" align="center">
            <el-radio v-model="form.waterMarkPosition" :label="3">3</el-radio>
          </td>
        </tr>
        <tr>
          <td width="33%" align="center">
            <el-radio v-model="form.waterMarkPosition" :label="4">4</el-radio>
          </td>
          <td width="33%" align="center">
            <el-radio v-model="form.waterMarkPosition" :label="5">5</el-radio>
          </td>
          <td width="33%" align="center">
            <el-radio v-model="form.waterMarkPosition" :label="6">6</el-radio>
          </td>
        </tr>
        <tr>
          <td width="33%" align="center">
            <el-radio v-model="form.waterMarkPosition" :label="7">7</el-radio>
          </td>
          <td width="33%" align="center">
            <el-radio v-model="form.waterMarkPosition" :label="8">8</el-radio>
          </td>
          <td width="33%" align="center">
            <el-radio v-model="form.waterMarkPosition" :label="9">9</el-radio>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="tips">请在此选择水印添加的位置(共 9 个位置可选)</div>
  </el-form-item>

  <el-form-item v-if="form.isWaterMark" label="水印不透明度">
    <el-select v-model="form.waterMarkTransparency">
      <el-option v-for="waterMarkTransparency in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="waterMarkTransparency" :value="waterMarkTransparency" :label="waterMarkTransparency + '0%'"></el-option>
    </el-select>
    <div class="tips">取值范围10%--100% (100%为不透明)</div>
  </el-form-item>
  <el-form-item v-if="form.isWaterMark" label="图片最小宽度" prop="waterMarkMinWidth" :rules="[
    { required: true, message: '请输入图片最小宽度' },
    { validator: utils.validateInt }
  ]">
    <el-input v-model.number="form.waterMarkMinWidth" placeholder="请输入图片最小宽度"></el-input>
    <div class="tips">需要添加水印的图片的最小宽度，单位为像素，（0代表不限制）</div>
  </el-form-item>
  <el-form-item v-if="form.isWaterMark" label="图片最小高度" prop="waterMarkMinHeight" :rules="[
    { required: true, message: '请输入图片最小高度' },
    { validator: utils.validateInt }
  ]">
    <el-input v-model.number="form.waterMarkMinHeight" placeholder="请输入图片最小高度"></el-input>
    <div class="tips">需要添加水印的图片的最小高度，单位为像素，（0代表不限制）</div>
  </el-form-item>
  <el-form-item v-if="form.isWaterMark" label="水印类型">
    <el-radio-group v-model="form.isImageWaterMark">
      <el-radio :label="false">文字水印</el-radio>
      <el-radio :label="true">图片水印</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item v-if="form.isWaterMark && !form.isImageWaterMark" label="文字水印内容" prop="waterMarkFormatString" :rules="{ required: true, message: '请输入文字水印内容' }">
    <el-input v-model="form.waterMarkFormatString" placeholder="请输入文字水印内容"></el-input>
    <div class="tips">可以使用替换变量: {0}表示当前日期 {1}表示当前时间 例如:"上传于{0} {1}"</div>
  </el-form-item>
  <el-form-item v-if="form.isWaterMark && !form.isImageWaterMark" label="文字水印字体" prop="waterMarkFontName" :rules="{ required: true, message: '请选择文字水印字体' }">
    <el-select v-model="form.waterMarkFontName" placeholder="请选择文字水印字体">
      <el-option v-for="name in families" :key="name" :value="name" :label="name"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item v-if="form.isWaterMark && !form.isImageWaterMark" label="文字水印文字大小（像素）" prop="waterMarkFontSize" :rules="[
    { required: true, message: '请输入文字水印文字大小' },
    { validator: utils.validateInt }
  ]">
    <el-input v-model.number="form.waterMarkFontSize" placeholder="请输入文字水印文字大小"></el-input>
  </el-form-item>
  <el-form-item v-if="form.isWaterMark && form.isImageWaterMark" label="图片水印文件" prop="waterMarkImagePath" :rules="{ required: true, message: '请上传图片水印文件' }">
    <el-upload
      class="avatar-uploader"
      :action="urlUpload"
      :headers="{Authorization: 'Bearer ' + $token}"
      :show-file-list="false"
      :drag="true"
      :limit="1"
      :before-upload="uploadBefore"
      :on-progress="uploadProgress"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :multiple="false">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" v-on:click="btnSubmitClick" size="small">确 定</el-button>
  </el-form-item>
</el-form>

@section Scripts{
<script src="/sitefiles/assets/js/admin/cms/settingsWaterMark.js" type="text/javascript"></script> }